<template>
    <div class='swiper'>
        <swiper :options="swiperOption">
            <!-- slides -->
            <swiper-slide
                    v-for='(item,index) in swiperList'
                    :key='index'
            >
                <img :src="item">
            </swiper-slide>
            
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    export default {
        name: "Banner",
        props:{
            swiperList:{
                type:Array,
            }
        },
        data () {
            return {
                swiperOption: {
                    autoplay:true,
                     speed: 400,  // 切换图片速度
                    loop:true,
                    autoplay: {
                        disableOnInteraction: false,   // 手动滑动后继续自动播放
                        delay:1000
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        
                    },
                    observer:true,//修改swiper自己或子元素时，自动初始化swiper
	                observeParents:true//修改swiper的父元素时，自动初始化swiper


                }
            }
        }
    }
</script>

<style scoped>
    .swiper{
     height: 270px;
     margin-bottom: 10px;
    }
    .swiper-container{
        width: 100%;
        height: 100%;
    }
    .swiper img{
        width: 100%;
        height: 100%;
        
    }
     .swiper-pagination >>> .swiper-pagination-bullet{
        background-color: #fff;
        opacity: 1;
    }
    .swiper-pagination >>> .swiper-pagination-bullet-active{
        background: red;
    }
    
</style>